<template>
  <div>
      <div class="codeEditBox">
      <editor
          v-model="code"
          @init="editorInit"
          @input='codeChange'
          lang="javascript"
          :options="editorOptions"
          theme="chrome"
        ></editor>
      </div>

    <JsonView :data="JsonData"></JsonView>
  </div>
</template>

<script>

import JsonView from 'vue-json-views'
import Editor from 'vue2-ace-editor';

export default {
  components: { 
    JsonView,
    Editor
  },
  data() {
    return {
      JsonData: {
          'code': 200,
          'message': 'succeed !',
          'data': [
            {
              'uuid': 'C8A37C2D-0842-423B-AEBA-976C106A3E90',
              'version': 1,
              'code': '202',
              'message': '请求失败',
              'createId': 'dev',
              'createDate': '2018-12-03T00:00:00',
              'modifyId': null,
              'modifyDate': null
            }
          ]
        },
        code: '', 
        editorOptions: {
          // 设置代码编辑器的样式
          enableBasicAutocompletion: true, //启用基本自动完成
          enableSnippets: true, // 启用代码段
          enableLiveAutocompletion: true, //启用实时自动完成
          tabSize: 2, //标签大小
          fontSize: 18, //设置字号
          showPrintMargin: false, //去除编辑器里的竖线
        },
    }
  },
  methods: {
    codeChange(val){
      //  console.log(val);
    },
    editorInit() {
      require('brace/theme/chrome');
      require('brace/ext/language_tools'); //language extension prerequsite...
      require('brace/mode/yaml');
      require('brace/mode/json');
      require('brace/mode/less');
      require('brace/snippets/json');
      require('brace/mode/lua');
      require('brace/snippets/lua');
      require('brace/mode/javascript');
      require('brace/snippets/javascript');
    },
  },
}
</script>

<style scoped>
.codeEditBox{
    width:100%;
    height:200px;
    border:1px solid #dcdee2;
}
</style>